import React, { Component, PropTypes } from 'react';
import { Form, Input, Icon, Button, Select, Row, Col, Card } from 'antd'
import styles from './Search.css';

const FormItem = Form.Item;
const Option = Select.Option;

class Search extends Component {
  state = {
    expand: false
  };

  handleSearch = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      console.log('Received values of form: ', values);
      delete values.dict;
      this.props.onSearch(values);
    });
  }

  handleReset = () => {
    this.props.form.resetFields();
  }

  toggle = () => {
    const { expand } = this.state;
    this.setState({ expand: !expand });
  }

  render() {
    const { formItemLayout }= this.props.formItemLayout;
    const { getFieldDecorator } = this.props.form;
    const expand = this.state.expand;
    const dict = this.props.dict.map((di) => <Option key={di.key} value={di.key}>{di.value}</Option>);
    const uiComp = [];
    if (expand) {
      uiComp.push(<Row gutter={16} type="flex" align="left" justify="start" key="111"
                       style={{ marginTop: '10px' }}>
        <Col md={8} xs={24}>
          <FormItem hasFeedback label="Dict" {...formItemLayout}>
            {getFieldDecorator('dict', {
              initialValue: '',
            })(
              <Select
                showSearch
                style={{ width: 200 }}
                placeholder="Select a person"
                optionFilterProp="children"
                filterOption={(input, option) => option.props.value.toLowerCase().indexOf(input.toLowerCase()) >= 0}
              >
                {dict}
              </Select>
            )}
          </FormItem>
        </Col>
      </Row>);
    }
    return (
      <div className={styles.normal}>
        <Card bordered={false}>
          <div className={styles.search}>
            <Form layout={'inline'} onSubmit={this.handleSearch}>
              <Row gutter={16} type="flex" align="left" justify="start">
                <Col md={8} xs={24}>
                  <FormItem label="Name" {...formItemLayout}>
                    {getFieldDecorator('name', {
                      initialValue: '',
                    })(
                      <Input
                        placeholder="Enter userName"
                        prefix={<Icon type="user" />}
                      />
                    )}
                  </FormItem>
                </Col>
                <Col md={8} xs={24}>
                  <FormItem hasFeedback label="Email" {...formItemLayout}>
                    {getFieldDecorator('email', {
                      initialValue: '',
                    })(
                      <Input
                        placeholder="Enter email"
                        prefix={<Icon type="tablet" />}
                      />
                    )}
                  </FormItem>
                </ Col >
                < Col md={8} xs={24}>
                  <FormItem hasFeedback label="WebSite" {...formItemLayout}>
                    {getFieldDecorator('website', {
                      initialValue: '',
                    })(<Input
                      placeholder="Enter website"
                      prefix={<Icon type="shopping-cart" />}
                    />)}
                  </FormItem>
                </Col>
              </Row>
              {uiComp}
              <Row>
                <Col span={24} style={{ textAlign: 'right', marginTop: '10px' }}>
                  <Button type="primary" htmlType="submit">Search</Button>
                  <Button style={{ marginLeft: 8 }} onClick={this.handleReset}>
                    Clear
                  </Button>
                  <a style={{ marginLeft: 8, fontSize: 12 }} onClick={this.toggle}>
                    Collapse <Icon type={this.state.expand ? 'up' : 'down'} />
                  </a>
                </Col>
              </Row>
            </Form>
          </div>
        </Card>
      </div>
    );
  }
}


const SearchForm = Form.create()(Search);
export default SearchForm;
